<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>淘宝网 - 淘！我喜欢</title>
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <!--    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
    <meta name="renderer" content="webkit"/>
    <link th:href="@{static/resource/img/png/logo.ico}" rel="icon"/>
    <link th:href="@{static/resource/css/font.css}" charset="UTF-8" rel="stylesheet"/>
    <link th:href="@{static/resource/css/comm.css}" charset="UTF-8" rel="stylesheet"/>
    <link th:href="@{static/resource/css/style.css}" charset="UTF-8" rel="stylesheet"/>
    <link th:href="@{static/resource/css/media.css}" charset="UTF-8" rel="stylesheet"/>
    <link th:href="@{static/resource/css/style_part2.css}" charset="UTF-8" rel="stylesheet"/>
    <link th:href="@{static/resource/css/main.css}" charset="UTF-8" rel="stylesheet"/>
    <link th:href="@{static/resource/css/simple_style.css}" charset="UTF-8" rel="stylesheet"/>
    <script type="text/javascript" th:src="@{webjars/vue/2.5.16/vue.js}"></script>
    <script type="text/javascript" th:src="@{webjars/axios/0.21.1/dist/axios.js}"></script>
    <script type="text/javascript" th:src="@{static/resource/lib/DelayLoad.js}"></script>
    <script type="text/javascript" th:src="@{static/resource/lib/Cookie.js}"></script>
    <script type="text/javascript" th:src="@{static/resource/lib/smoothscroll.js}"></script>
    <script type="text/javascript" th:src="@{static/resource/lib/simple_swiper.js}"></script>
    <script th:inline="javascript">
        var left_leaf = [[${array}]];
    </script>
</head>
<body>
<!--顶部导航-->
<div class="top-item" v-cloak>
    <div class="top-item-content">
        <div class="top-item-content-left">
            <li @mouseover="fadeIn" @mouseout="fadeOut">
                <label>中国大陆•</label>
                <div class="site-nav-region model" v-show="show">
                    <span class="site-nav-region-item" role="option" v-for="item in area">{{item}}</span>
                </div>
            </li>
            <div th:with="con=${userInfo}" th:remove="tag">
                <div th:if="${con}" class="invalid">
                    <a href="javascript:void(0)" th:text="${userInfo.nickname}"></a>
                    <div class="logout">
                        <a href="javascript:void(0)" @click="out" target="_self">退出</a>
                    </div>
                </div>
                <div th:unless="${con}" class="a-invalid">
                    <li><a href="/login">亲，请登录</a></li>
                    <li><a href="/register">免费注册</a></li>
                    <li><a href="javascript:void(0)">手机逛淘宝</a></li>
                </div>
            </div>
        </div>
        <div class="top-item-content-right">
            <ul class="c_r">
                <li class="my_tb" @mouseover="hide" @mouseout="Visi">
                    <a href="javascript:void(0)">我的淘宝</a>
                    <div class="site-mytb model" v-if="visible" th:text="${shop}">
                        <span class="site-nav-region-item">已买到的宝贝</span>
                        <span class="site-nav-region-item">我的足迹</span>
                    </div>
                </li>
                <li>购物车0</li>
                <li>收藏夹</li>
                <li>商品分类</li>
                <li>免费开店</li>
                <li>千牛卖家中心</li>
                <li>联系客服</li>
                <li>网站导航</li>
            </ul>
        </div>
    </div>
</div>
<!--首页banner-->
<div class="search-nav">
    <div class="inner-content">
        <div class="top top-radius">
            <div class="web-logo">
                <a href="javascript:void(0)" target="_self">
                    <img
                            src="https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png"
                            alt=" "></a>
            </div>
            <div class="search-input">
                <!--搜索框-->
                <form id="frm" v-cloak accept-charset="UTF-8" onsubmit="return false" target="_self" action="/search"
                      method="get">
                    <div class="search-keywords">
                        <ul class="J_SearchTab">
                            <li class="J_SearchTab-li">宝贝</li>
                            <li class="J_SearchTab-li">天猫</li>
                            <li class="J_SearchTab-li">店铺</li>
                        </ul>
                        <i class="biger" v-if="show"></i>
                        <input @keyup.enter="search" autocomplete="off" @input="prev" v-model="keyword"
                               :placeholder="placeholder" name="word"
                               id="keyword"/>
                        <div class="search-camera">
                            <input type="file" accept="image/*">
                        </div>
                        <div class="search-button">
                            <button type="submit" @click="search">搜索</button>
                        </div>
                    </div>
                </form>
                <!-- 搜索推荐 -->
                <div class="search-push">
                    <label th:each="arr:${push}" v-cloak>
                        <a th:href="${arr.link}" th:text="${arr.title}" target="_blank"></a>
                    </label>
                </div>
                <!--结果集-->
                <div class="result" v-if="fade">
                    <li v-for="item in list" v-cloak @click="search(item.name)">
                        {{item.name}}
                    </li>
                </div>
            </div>
            <div class="code">
                <a href="https://market.m.taobao.com/app/fdilab/download-page/main/index.html?spm=a21bo.2017.201858.1.5af911d9us9uWz&acm=lb-zebra-634493-8609660.1003.4.8190782&scm=1003.4.lb-zebra-634493-8609660.OTHER_15917281779251_8190782"
                   target="_blank">
                    <img alt=" "
                         src=""
                    ></a>
            </div>
        </div>
    </div>
</div>
<!--首部内容-->
<div class="main-content radius">
    <div class="top-nav">
        <h5 class="top-nav-h5">分类</h5>
        <div class="top-nav-div">
            <ul class="devs">
                <li class="nav-hd"><a href="javascript:void(0)">天猫</a></li>
                <li class="nav-hd"><a href="javascript:void(0)">聚划算</a></li>
                <li class="nav-hd"><a href="javascript:void(0)">天猫超市</a></li>
            </ul>
            <ul>
                <li class="nav-hd">|</li>
                <li class="nav-hd"><a href="javascript:void(0)">电器城</a></li>
                <li class="nav-hd"><a href="javascript:void(0)">淘抢购</a></li>
                <li class="nav-hd"><a href="javascript:void(0)">司法拍卖</a></li>
                <li class="nav-hd"><a href="javascript:void(0)">淘宝必选</a></li>
            </ul>
            <ul class="last">
                <li class="nav-hd">|</li>
                <li class="nav-hd"><a href="javascript:void(0)">飞猪旅行</a></li>
                <li class="nav-hd"><a href="javascript:void(0)">智能生活</a></li>
                <li class="nav-hd"><a href="javascript:void(0)">苏宁易购</a></li>
            </ul>
        </div>
    </div>
    <!-- 左边导航 -->
    <div class="main">
        <div class="left-nav">
            <ul class="left-nav-ul">
                <li v-for="item in linkList" v-cloak>
                    <!--                    <span>-->
                    <a v-for="(it,index) in item" :key="it.text" v-cloak
                       :href="it.link" target="_blank">{{it.text}}&nbsp;{{index===(item.length-1)?'':'/'}}</a>
                </li>
            </ul>
        </div>
        <!-- 中间轮播 -->
        <div class="tb-slide ">
            <div id="slide" class="simple-swiper-container radius">
                <div class="swiper-wrapper" id="swiper_one">
                    <div th:each="slide:${swiper}" class="swiper-items">
                        <a th:href="${slide.link}">
                            <img th:attr="_src=${slide.src}"/>
                        </a>
                    </div>
                </div>
                <a href="javascript:void(0);" class="prev tb-slide-one-prev" id="J_pre"></a>
                <a href="javascript:void(0);" class="next tb-slide-one-next" id="J_next"></a>
                <div class="pagination"></div>
            </div>
            <div id="slide_two" class="simple-swiper-container tb-slide-two radius">
                <div class="swiper-wrapper">
                    <div class="swiper-items" v-for="item in list">
                        <a v-for="con in item" :href="con.link" class="radius" target="_blank">
                            <img :data="con.src" alt=" ">
                        </a>
                    </div>
                </div>
                <p class="tb-slide-two-prev prev" id="J_pre_t"></p>
                <p class="tb-slide-two-next next" id="J_next_t"></p>
                <div class="pagination2"></div>
            </div>
        </div>
    </div>
    <!-- 用户登录 -->
    <div class="user-control radius">
        <!-- <用户头像> -->
        <div class="user-do">
            <div class="user-pic" th:with="is_login = ${userInfo}">
                <img th:src="${userInfo==null?'static/resource/img/jpg/default.jpg':userInfo.user_tx}" alt=""/>
            </div>
            <div class="user-control-btn">
                <!-- 用户名字 -->
                <div th:with="ios=${userInfo}" th:remove="tag">
                    <p th:if="${ios}" class="username">
                        <a href="javascript:void(0)" th:text="'hi!, '+${userInfo.nickname}"></a>
                    </p>
                    <p th:unless="${ios}" class="username">
                        <a href="javascript:void(0)">Hi! 你好</a>
                    </p>
                </div>
                <p class="fuli">
                    <i class="icon o"></i>
                    <a href="javascript:void(0)">领淘金币抵钱</a>
                </p>
                <p class="fuli">
                    <i class="icon t"></i>
                    <a href="javascript:void(0)">会员俱乐部</a>
                </p>
                <div th:class="'user-button ' + ${hide}">
                    <div class="bottom-slider">
                        <div class="button-grp">
                            <a href="/login">登录</a>
                            <a href="/register">注册</a>
                            <a href="javascript:void(0)">开店</a>
                        </div>
                        <div class="shop_message">
                        <span>
					<b>0</b>
					<p>待收货</p>
				</span>
                            <span>
					<b>0</b>
					<p>待发货</p>
				</span>
                            <span>
					<b>0</b>
					<p>待付款</p>
				</span>
                            <span>
					<b>0</b>
					<p>待评价</p>
				</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="user-panel-s">
                <div class="mofang-items" th:each="items : ${mofang}">
                    <a th:href="${items.link}" target="_blank">
                        <img delay="true" th:attr="data=${items.img_src}" alt=" ">
                    </a>
                </div>
            </div>
            <!--新闻轮播-->
            <div id="msg_swiper" class="simple-swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-items" th:each="items : ${msg_list}">
                        <a th:text="${items.title}" th:href="${items.link}" th:attr="data-id=${items.id}"
                           target="_blank"
                           class="msg-item"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container_one radius">
        <div class="container_one_title">
            <img alt="" delay="true"
                 src=""
                 data="https://img.alicdn.com/imgextra/i1/O1CN01EjcAPM25IsjiwGyYs_!!6000000007504-2-tps-65-20.png"/>
            <span>有好货</span>
        </div>
        <ul class="store">
            <li th:each="item:${app}">
                <a th:href="${item.link}" target="_blank" th:title="${item.title}">
                    <img alt="" class="radius" delay="true"
                         src=""
                         th:attr="data=${item.src}">
                    <label th:text="${item.title}"></label>
                    <p th:text="${item.description}">一脚蹬设计，方便日常的穿脱。</p>
                    <nav class="use_word">
                        <label class="fa-smile-o" th:text="${item.appraise}"></label>人说好
                    </nav>
                </a>
            </li>
        </ul>
    </div>
    <!--热卖单品-->
    <div class="content-box radius hidden">
        <div class="hot-good radius">
            <h3 class="hot-good-title">猜你喜欢</h3>
            <div class="guess">
                <div class="guess-car radius" th:each="item:${more}">
                    <div class="car-img">
                        <a th:href="${item.getLink()}">
                            <img class="radius hidden"
                                 src=""
                                 delay="true" th:attr="data=${item.getImg()}"
                                 alt=" ">
                        </a>
                    </div>
                    <div class="car-title" th:text="${item.getTitle()}">
                    </div>
                    <span class="car-price">
                    <em>￥</em>
                    <label th:text="${item.getPrice()}"></label>
                </span>
                </div>
            </div>
        </div>
    </div>
    <div class="jFrame">
        <div class="jFrame-top">
            <div class="back-top">
                <a class="float-btn pbtn" @click="scrollTo('.content-box')" href="javascript:void(0)">
                    <span>猜你喜欢</span>
                </a>
                <a class=" float-btn pbtn" href="javascript:void(0)">
                    <span>反馈</span>
                </a>
                <a class="float-btn pbtn" href="javascript:void(0)">
                    <span>暴恐举报</span>
                </a>
                <a class="float-btn backtop" href="javascript:void(0)" @click="top">
                    <span class="fa-chevron-up">顶部</span>
                </a>
            </div>
        </div>
    </div>
    <!--底部信息-->
    <footer class="footer-msg">
        <div class="message">
            <a href="https://beian.miit.gov.cn/" target="_blank">备案号：黔ICP备2022003359号</a>
        </div>
    </footer>
</body>
<script type="module" th:src="@{static/resource/js/init.js}" charset="UTF-8"></script>
<script type="text/javascript" th:src="@{static/resource/js/main.js}" charset="UTF-8"></script>
</html>
